<template>
	<view>
		
		<block v-if="apartmentList.length">
			<view v-for="(item,index) in apartmentList" :key="index" class="flex justify-between align-center py-3 mx-3"
				style="border-bottom: 1px solid #F6F6F6;"@tap="choiceLabel(item)">
				<image style="width: 268rpx;height: 172rpx;" class="mr-3" :src="item.thumb" mode=""></image>
				<view class="flex flex-column flex-1 justify-between" style="height:180rpx;">

					<text class="font-28 fwb cl-1a text-one" style="max-width: 320rpx;">{{item.title}}</text>
					<view class="flex align-center">
						<u-icon name="map" color="#6E6E6E" size="11"></u-icon>
						<text class="font-24 fw4 cl-aa text-one" style="max-width: 320rpx;">{{item.address}}</text>
					</view>
					<view class="flex flex-wrap">
						<block v-for="(label,labelIndex) in item.labels">
							<view v-if="labelIndex < 3" :key="labelIndex"
								class="flex align-center py-1 px-1 rounded-10 mr-1 mb-1"
								:style="{backgroundColor:label.color}">
								<text class="font-20" style="color:#fff;">{{label.title}}</text>
							</view>
						</block>
						

					</view>
					<view class="flex align-center">
						<text class="font-20 fw5" style="color: #C40E0E;">{{item.currency}}</text>
						<text class="font-28 fw5"
							style="color: #C40E0E;margin-left: 6rpx;margin-right: 6rpx;">{{item.price}}</text>
						<text class="font-20 fw4 cl-88">起 /周</text>
					</view>
				</view>
				<image src="../../static/index/check-true.png"  v-if="labelItem.find(({id})=>id === item.id) ? true : false" style="width: 28rpx;height: 28rpx;"></image>
				<image src="../../static/index/check-false.png"  v-else style="width: 28rpx;height: 28rpx;"></image>
			</view>
			<view style="height: 300rpx;"></view>
		</block>
		<u-empty v-else mode="list" text=" " icon="http://cdn.uviewui.com/uview/empty/list.png">
		</u-empty>
		<view class="button">
			<view @tap="submit">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search_height: 0,
				apartmentList: [],
				labelItem:[],//选择项
				requestData: {
					price_sort: 0, //价格排序 1-从低到高，2-从高到低
					min_price: '',
					max_price: '',
					facility_ids: '', //筛选-公寓设施id
					page: 1,
					pagesize: 20,
					school_id: '', //学校id
					city_id: '', //城市id
					keyword: ''
				}
			}
		},
		onLoad(option) {
			this.requestData.city_id = option.cityId
			this.labelItem = JSON.parse(option.apartment)
			const query = uni.createSelectorQuery().in(this)
			// query.select('.heade').boundingClientRect(data => {
			// 	this.search_height = data.height
			// }).exec()
		},
		onShow() {
			this.requestData.keyword = ''
			this.getData()
		},
		methods: {
			submit(){
				if(!this.labelItem.length) return this.msg('请选择公寓')
				uni.$emit('choiceApa', {
					msg: '带参返回',
					list: this.labelItem
				})
				uni.navigateBack()
			},
			//选择标签
			choiceLabel(item) {
				const labelItem = this.labelItem.slice();
				const idx = labelItem.findIndex(({
					id
				}) => item.id === id);
				if (idx === -1) {
					if(this.labelItem.length >= 3) return this.msg('最多选三项')
					labelItem.push(item);
					this.labelItem = labelItem;
					console.log(this.labelItem)
				} else {
					this.labelItem = labelItem.slice(0, idx).concat(labelItem.slice(idx + 1));
				}
			},
			toDetail(item) {
				// this.jump({
				// 	url: `/pages/apartmentDetail/apartmentDetail?id=${item.id}`
				// })
			},
			changeInput(e) {
				console.log(this.requestData.keyword)
				this.getData()
			},
			getData() {
				this.$H.post(this.$api.apartment_list, {
					...this.requestData
				}, {
					token: false
				}).then(res => {
					console.log(res)
					this.apartmentList = res.data.list
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	.button {
		padding: 20rpx 36rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 99;
	
		view {
			text-align: center;
			padding: 24rpx 0;
			background: #FFB24B;
			border-radius: 34px;
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 28rpx;
		}
	}
</style>
